@import './variables.scss';

/* 全局样式 */
body {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  color: $text-color;
  background-color: #fff;
}

/* 容器样式 */
.container {
  max-width: $container-max-width;
  margin: 0 auto;
  padding: 0 $spacing-lg;
}

/* 按钮样式 */
.btn {
  display: inline-block;
  padding: $spacing-sm $spacing-xl;
  font-size: $font-size-base;
  font-weight: 500;
  text-align: center;
  border-radius: $border-radius-md;
  cursor: pointer;
  transition: all $transition-normal;
  
  &-primary {
    background-color: $primary-color;
    color: #fff;
    
    &:hover {
      background-color: $primary-dark;
    }
  }
  
  &-outline {
    border: 1px solid $primary-color;
    color: $primary-color;
    
    &:hover {
      background-color: $primary-color;
      color: #fff;
    }
  }
}

/* 标题样式 */
.section-title {
  text-align: center;
  margin-bottom: $spacing-xl;
  position: relative;
  
  h2 {
    font-size: $font-size-xl;
    font-weight: 500;
    color: $primary-color;
    display: inline-block;
    padding: 0 $spacing-md;
    background-color: #fff;
    position: relative;
    z-index: 1;
  }
  
  &::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 1px;
    background-color: $border-color;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* 分隔线 */
.divider {
  width: 100%;
  height: 1px;
  background-color: $border-color;
  margin: $spacing-xl 0;
}

/* 响应式图片 */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 卡片样式 */
.card {
  background-color: #fff;
  border-radius: $border-radius-md;
  box-shadow: $box-shadow-sm;
  overflow: hidden;
  transition: transform $transition-normal, box-shadow $transition-normal;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: $box-shadow-md;
  }
  
  .card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .card-body {
    padding: $spacing-lg;
  }
  
  .card-title {
    font-size: $font-size-lg;
    margin-bottom: $spacing-sm;
    color: $text-color;
  }
  
  .card-text {
    color: $light-text;
    font-size: $font-size-sm;
    margin-bottom: $spacing-lg;
  }
}

/* 响应式布局 */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -$spacing-md;
}

.col {
  padding: 0 $spacing-md;
  margin-bottom: $spacing-xl;
  
  &-1 { width: 8.333%; }
  &-2 { width: 16.666%; }
  &-3 { width: 25%; }
  &-4 { width: 33.333%; }
  &-5 { width: 41.666%; }
  &-6 { width: 50%; }
  &-7 { width: 58.333%; }
  &-8 { width: 66.666%; }
  &-9 { width: 75%; }
  &-10 { width: 83.333%; }
  &-11 { width: 91.666%; }
  &-12 { width: 100%; }
}

/* 媒体查询 */
@media (max-width: $breakpoint-md) {
  .col {
    &-md-1 { width: 8.333%; }
    &-md-2 { width: 16.666%; }
    &-md-3 { width: 25%; }
    &-md-4 { width: 33.333%; }
    &-md-5 { width: 41.666%; }
    &-md-6 { width: 50%; }
    &-md-7 { width: 58.333%; }
    &-md-8 { width: 66.666%; }
    &-md-9 { width: 75%; }
    &-md-10 { width: 83.333%; }
    &-md-11 { width: 91.666%; }
    &-md-12 { width: 100%; }
  }
}

@media (max-width: $breakpoint-sm) {
  .col {
    &-sm-1 { width: 8.333%; }
    &-sm-2 { width: 16.666%; }
    &-sm-3 { width: 25%; }
    &-sm-4 { width: 33.333%; }
    &-sm-5 { width: 41.666%; }
    &-sm-6 { width: 50%; }
    &-sm-7 { width: 58.333%; }
    &-sm-8 { width: 66.666%; }
    &-sm-9 { width: 75%; }
    &-sm-10 { width: 83.333%; }
    &-sm-11 { width: 91.666%; }
    &-sm-12 { width: 100%; }
  }
}

/* 文本对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* 文本颜色 */
.text-primary { color: $primary-color; }
.text-light { color: $light-text; }
.text-lighter { color: $lighter-text; }
.text-white { color: #fff; }

/* 背景颜色 */
.bg-primary { background-color: $primary-color; }
.bg-light { background-color: $bg-light; }
.bg-dark { background-color: $bg-dark; }
.bg-white { background-color: #fff; }

/* 边距工具类 */
.mt-1 { margin-top: $spacing-xs; }
.mt-2 { margin-top: $spacing-sm; }
.mt-3 { margin-top: $spacing-md; }
.mt-4 { margin-top: $spacing-lg; }
.mt-5 { margin-top: $spacing-xl; }

.mb-1 { margin-bottom: $spacing-xs; }
.mb-2 { margin-bottom: $spacing-sm; }
.mb-3 { margin-bottom: $spacing-md; }
.mb-4 { margin-bottom: $spacing-lg; }
.mb-5 { margin-bottom: $spacing-xl; }

.pt-1 { padding-top: $spacing-xs; }
.pt-2 { padding-top: $spacing-sm; }
.pt-3 { padding-top: $spacing-md; }
.pt-4 { padding-top: $spacing-lg; }
.pt-5 { padding-top: $spacing-xl; }

.pb-1 { padding-bottom: $spacing-xs; }
.pb-2 { padding-bottom: $spacing-sm; }
.pb-3 { padding-bottom: $spacing-md; }
.pb-4 { padding-bottom: $spacing-lg; }
.pb-5 { padding-bottom: $spacing-xl; } 